import React, { useState, useEffect } from 'react'
import './App.css'
import HelloComponents from './hello'
import NameEditComponent from './nameEdit'

function App() {
  const [name, setName] = useState("initialName")
  const [editingName, setEditingName] = useState("initialName")
  // 1.0 版
  // const setNameState = (newName: string) => { setName(newName) }
  // (e: React.ChangeEvent<HTMLInputElement>) => {
  //   setName(e.target.value)
  // } 不需要 定这么复杂

  // 2.0版
  const setNameState = () => {
    // 正式改变 name 值 为 editingName
    setName(editingName);
  }
  const loadUsername = () => {
    setTimeout(() => {
      setName("name from async call")
      setEditingName("name from async call")
    }, 2500)
  }
  useEffect(() => {
    // 改变初始化 name editingName
    loadUsername()
  }, [])

  return (
    <div className="App">
      {/* <HelloComponent 不满足子组件需要的类型约定-报错/> 类型“{}”缺少类型“Props”中的以下属性: userName, userAge */}
      <HelloComponents userName={name} userAge={18} />
      <div>
        name:{name}
      </div>
      <div>
        editingName:{editingName}
      </div>
      {/* <NameEditComponent userName={name} onNameUpdated={setNameState} /> 1.0版 */}
      <NameEditComponent
        initialUserName={name}
        editingName={editingName}
        onNameUpdated={setNameState}
        onEditingNameUpdated={setEditingName}
        disabled={name === editingName || editingName == ""}
      />
    </div>
  )
}

export default App
